import React from 'react';
import FileUploadTool from 'shared/utils/upload';
import Toast from 'antd-mobile/lib/toast';
import { fetchUserCenterApi, fetchMyInfoApi } from '../../api';
import './PersonalInfoCard.less';

// import * as bankCarImg from '../../static/bank_car.png';
const bankCarImg0 = require('src/static/bank_card.png');
const bankCarImg1 = require('src/static/truck.png');
const bankCarImg2 = require('src/static/car_ok.png');


class PersonalInfoCard extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      data: '',
      img: '',
      infoData: {}
    }
  }

  componentDidMount() {
    this.fetchUserCenter()
    this.fetchMyInfo()
  }

  fetchUserCenter() {
    fetchUserCenterApi().then(({ data }) => {
      data && this.setState({ data })
    })

  }

  fetchMyInfo = ()=>{
    fetchMyInfoApi().then(({ data }) => {
      data && this.setState({ infoData: data })
    })
  }

  handleUpload = (e) => {

    const self = this;
    const data = { filename: 'file', file: e.target.files[0] };
    Toast.loading('上传中', 10);
    FileUploadTool.post(
      'jiekec/index.php?route=account/customer/setavatar', data,
      (res) => {
        if (res.code === 1000) {
          self.setState({ img: res.data.avatar })
          self.fetchMyInfo()
          Toast.hide();
        } else {
          Toast.fail('上传失败', 1);
        }
      },
      (ProgressData) => {
      },
      (error) => {}
    );

  }

  onChange=(e)=>{
    console.log('e', e)
  }

  render(){
    const { data, infoData } = this.state;
    const info = data && data.userinfo;
    const orderState = data && data.orderstat;
    const img = [bankCarImg0, bankCarImg1, bankCarImg2];
    return (
      <div className="personal-card">
        {/* <div className="personal-headshot">
          <img src={this.state.img || infoData.avatar} alt="" />
          <div className="edit-avatar">编辑头像</div>
          <input type="file" onChange={this.handleUpload} />
        </div> */}
        <div className="personal-info">
          {/* <p className="personal-info__nickname">{data.username}</p> */}
          {/* <p className="personal-info__username">用户名：{info.username}</p> */}
          <ul>
            {
              orderState && orderState.map((item, i)=>(
                <li key={i}><img src={img[i]} alt="" />{item.order_status_name}<span>{item.total}</span></li>
              ))
            }
          </ul>
        </div>
      </div>
    )
  }
}

export default PersonalInfoCard;
